<?include_once('conn.php');?>
<?include_once('inc_head.php');?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<body>
	<?local("园区添加");?>
<div id="intro">
<div class="admin-main">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>操作表单</legend> </fieldset>
	<form action="do.jsp" class="layui-form" lay-filter="formDemo">
		<div class="layui-form-item">
			<label class="layui-form-label">标题</label>
			<div class="layui-input-block"><input type="text" name="name" id="name" lay-verify="required"   lay-verType="tips" class="layui-input w200"></div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">所属行政区域 </label>
			<div class="layui-input-block">
				<!-- 省 -->
				<div class="layui-input-inline w200">
					<select name="province" class="layui-select" id="province" lay-verify="required" lay-filter="province">
						<option value="">请选择省份</option>
					</select>
				</div>
				<div class="layui-input-inline w200">
					<select name="city" class="layui-select" id="city" lay-verify="required" lay-filter="city">
						<option value="">请选择市</option>
					</select>
				</div>
				<div class="layui-input-inline w200">
					<select name="area" class="layui-select" id="area" lay-verify="required" lay-filter="area">
						<option value="">请选择县区</option>
					</select>
				</div>

			</div>
		</div>
		<div class="layui-form-item"> <div class="layui-input-block"><button class="layui-btn " lay-submit lay-filter="formDemo">提交</button></div> </div>
	</form>
</div>
<!-- ***********************************脚本区域************************************* -->
<script src="./plugins/layui/layui.all.js"></script>
<script src="./js/vbyzc.js"></script>

<script>
	// 设置
	const API_SUBMIT = API_SCOPE_ADD;    // 提交接口

	// 表单验证
	form.on('submit(formDemo)', function(data){
		console.log(JSON.stringify(data.field));
		vtool.ajax({
			type: 'POST',
			url : API_SUBMIT,
			data: data.field,
			cb  : editCallback
		})
		return false;
	});
	
	// 执行队列
	pm(resolve => resolve())
	.then(()=>{
		return pm(
			(resolve)=>{
				// 加载省份
				vtool.ajax({
					type: 'GET', url : API_ADDR_PROVINCE, data: {},
					cb:(res)=>{
						console.log(res)
						res.dataList.forEach(item =>{ $("#province").append("<option value="+item.provinceid+">"+item.name+"</option>"); });
						form.render();
						resolve()
					}
				})
			}
		)
	})
	.then(()=>{
		return pm(
			(resolve)=>{
			}
		)
	})
	.then(()=>{
		console.log('执行完成')
	})

	// 省份下拉菜单事件
	form.on('select(province)', function(data){
		const provinceid = data.value
		console.log(provinceid)
		vtool.ajax({
			type: 'GET', url : API_ADDR_CITY, data: {provinceid},
			cb:(res)=>{
				$("#city").html('<option value="">请选择市</option>');
				res.dataList.forEach(item =>{ 
					$("#city").append("<option value="+item.cityid+">"+item.name+"</option>"); 
				});
				form.render();
			}
		})
	});

	// 城市下拉菜单事件
	form.on('select(city)', function(data){
		const cityid = data.value
		console.log(cityid)
		vtool.ajax({
			type: 'GET', url : API_ADDR_AREA, data: {cityid},
			cb:(res)=>{
				$("#area").html('<option value="">请选县区</option>');
				res.dataList.forEach(item =>{
					$("#area").append("<option value="+item.areaid+">"+item.name+"</option>"); 
				});
				form.render();
			}
		})
	});
</script>
</div>
<?include('inc_foot.php');?>
</body>
</html>